<template>
  <view>
    <!-- Tab 菜单，四个状态页面 -->
    <uni-segmented-control 
      :current="current" 
      :values="['全部', '等待确认', '正在进行', '已完成']" 
      @clickItem="onClickItem" 
      styleType="text"
      activeColor="#ff9900">
    </uni-segmented-control>
    
    <!-- 订单列表 -->
    <view>
      <view v-for="order in filteredOrders" :key="order.id" class="order-item">
        <image :src="order.avatar" class="course-avatar" mode="aspectFill"></image>
        <view class="order-info">
          <view class="info-row">
            <text class="label">家长:</text>
            <text>{{ order.name }}</text>
            <text class="label">教师:</text>
            <text>{{ order.teachername }}</text>
          </view>
          <view class="info-row">
            <text class="label">课程:</text>
            <text>{{ order.course }}</text>
            <text class="label">时间:</text>
            <text>{{ order.order_date }}</text>
          </view>
          <view class="info-row">
            <text class="label">薪资:</text>
            <text>￥{{ order.salary }}</text>
            <text class="label">状态:</text>
            <text>{{ getStatusText(order.status) }}</text> <!-- 显示状态 -->
          </view>
        </view>
        <view class="order-actions">
          <button class="detail-btn" @click="goOrdersItem(order.id)">详情</button>
          
          <!-- 根据状态和角色动态显示按钮 -->
          <button 
            v-if="order.status === '-1'" 
            class="confirm-btn" 
            :disabled="user.role === 'user'" 
            @click="confirmOrder(order.id)">
            确认
          </button>

          <button 
            v-if="order.status === '0' && user.role === 'user'" 
            class="confirm-btn" 
            @click="confirmOrder(order.id)">
            确认
          </button>

          <button 
            v-if="order.status === '1'" 
            class="cancel-btn" 
            @click="cancelOrder(order.id)">
            结束
          </button>

          <button 
            v-if="order.status === '2'" 
            class="delete-btn" 
            @click="del(order.id)">
            删除
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0,
      ordersList: [], // 所有订单列表
      user: []
    }
  },
  onShow() {
    this.user = uni.getStorageSync('xm-user');
    this.loadOrders();
  },
  computed: {
    // 根据选中的页面类型过滤订单列表
    filteredOrders() {
      if (this.current === 1) {
        // 等待确认页面展示 -1 和 0 状态的订单
        return this.ordersList.filter(order => order.status === '-1' || order.status === '0');
      }
      switch (this.current) {
        case 0:
          return this.ordersList; // 全部订单
        case 2:
          return this.ordersList.filter(order => order.status === '1'); // 正在进行
        case 3:
          return this.ordersList.filter(order => order.status === '2'); // 已完成
        default:
          return [];
      }
    }
  },
  methods: {
    // 显示订单状态对应的文本
    getStatusText(status) {
		if((status==='-1'&&this.user.role==='teacher')||(status==='0'&&this.user.role==='user'))
		return '等待确认';
		else if((status==='-1'&&this.user.role==='user')||(status==='0'&&this.user.role==='teacher'))
		return '等待对方确认';
		else if(status==='1')
		return '正在进行';
		else
		return '已完成';
    },
    
    // 跳转到订单详情页
    goOrdersItem(orderId) {
      uni.navigateTo({
        url: '/pages/ordersItem/ordersItem?orderId=' + orderId
      });
    },
    
    // 加载订单
    loadOrders() {
      const role = this.user.role;
      let url = '';
      if (role === 'user') {
        url = `/order/selectByUser?user_account=${this.user.account}`;
      } else if (role === 'teacher') {
        url = `/order/selectByTeacher?teacher_account=${this.user.account}`;
      }
      
      this.$request.get(url).then(res => {
        if (res.code === '200') {
          this.ordersList = res.data || [];
        } else {
          uni.showToast({ icon: "error", title: res.msg });
        }
      });
    },
    
    // 确认订单
confirmOrder(order_id) {
  uni.showModal({
    title: '订单操作',
    content: '您想接受还是拒绝该订单？',
    cancelText: '拒绝',  // 定义拒绝按钮的文本
    confirmText: '接受',  // 定义接受按钮的文本
    success: (res) => {
      if (res.confirm) {
        // 如果用户选择了“接受”
        this.$request.post(`/order/confirm?order_id=${order_id}`).then(res => {
          if (res.code === '200') {
            uni.showToast({ icon: "success", title: '确认成功' });
            this.loadOrders();  // 重新加载订单
          } else {
            uni.showToast({ icon: "error", title: res.msg || '确认失败' });
          }
        });
      } else if (res.cancel) {
       
              this.$request.del(`/order/delete/${order_id}`).then(res => {
                if (res.code === '200') {
                  uni.showToast({ icon: "success", title: '订单已拒绝' });
                  this.loadOrders();  // 重新加载订单
                } else {
                  uni.showToast({ icon: "error", title: res.msg || '删除失败' });
                }
              });
            
          }
      }
    
  });
},


    
    // 取消订单
cancelOrder(order_id) {
  uni.showModal({
    title: '提前结束订单',
    content: '您确定要提前结束该订单吗？',
    success: (res) => {
      if (res.confirm) {
        this.$request.post(`/order/cancel?order_id=${order_id}`).then(res => {
          if (res.code === '200') {
            uni.showToast({ icon: "success", title: '订单已结束' });
            this.loadOrders();
          } else {
            uni.showToast({ icon: "error", title: res.msg });
          }
        });
      }
    }
  });
},

    // 删除订单
del(order_id) {
  uni.showModal({
    title: '删除订单',
    content: '您确定要删除该订单吗？删除后无法恢复！',
    success: (res) => {
      if (res.confirm) {
        this.$request.del(`/order/delete/${order_id}`).then(res => {
          if (res.code === '200') {
            uni.showToast({ icon: "success", title: '删除成功' });
            this.loadOrders();
          } else {
            uni.showToast({ icon: "error", title: res.msg });
          }
        });
      }
    }
  });
},

    // 切换子页面
    onClickItem(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
    }
  }
}
</script>

<style>
/* 订单项的整体样式 */
.order-item {
  display: flex;
  align-items: center;
  padding: 10rpx;
  margin-bottom: 10rpx;
  border-radius: 8rpx;
  border: 1rpx solid #eee;
  background-color: #fff;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.05);
}

/* 课程头像样式 */
.course-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

/* 订单信息样式 */
.order-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5rpx;
}

.info-row {
  display: flex;
  justify-content: space-between;
}

/* 标签样式 */
.label {
  color: #666;
  font-size: 28rpx;
}

/* 操作按钮样式 */
.order-actions {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

/* 按钮样式 */
.detail-btn, .confirm-btn, .cancel-btn, .delete-btn {
  padding: 8rpx 20rpx;
  font-size: 28rpx;
  border-radius: 8rpx;
  color: white;
  border: none;
  cursor: pointer;
}

.detail-btn {
  background-color: #007bff;
}

.confirm-btn {
  background-color: #28a745;
}

.cancel-btn {
  background-color: #ffc107;
}

.delete-btn {
  background-color: #ff4d4f;
}

/* 禁用的按钮 */
.confirm-btn[disabled] {
  background-color: #ccc;
  cursor: not-allowed;
}

.detail-btn:hover {
  background-color: #0056b3;
}

.delete-btn:hover {
  background-color: #d32f2f;
}
</style>
